<template>
  <div class="sendComment">
    <div class="sendComment_box">
      <van-cell-group inset>
        <van-field v-model="comment" center maxlength="30" clearable :placeholder="placeholders">
          <template #button>
            <van-button size="small" type="primary" color="#ff5000" :loading="btnLoading" @click="send">发送</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>

import { toComment } from '@/api/work';
import { getToken } from '@/utils/auth';
import { showConfirmDialog, showNotify } from 'vant';
import { ref, watch } from 'vue';
const placeholders = ref('写评论')
const btnDisabled = ref(true) // 按钮禁用
const btnLoading = ref(false) // 按钮loading
const comment = ref('')         // 评论内容
const emit = defineEmits(['changeShowPicker', 'updateMsg'])
const props = defineProps({
  type: {
    type: String,   // 1聊工厂   2晒工资   3新鲜事   4随手拍
    default: ''
  },
  id: {
    type: Number,   // 动态 id
    default: ''
  },
  cid: {
    type: Number,   // 评论 id
    default: ''
  },
  uid: {
    type: Number,   // id
    default: ''
  },
  uname: {  //回复xx的评论
    type: String,   
    default: ''
  }
})
// 监听评论
watch(() => props.uname, (val, oldVal) => {
  console.log(val)
  if (props.uname) {
    placeholders.value = "回复"+props.uname
  }else{
    placeholders.value = "写评论"
  }
}, { immediate: true, deep: true })

// 提示用户登录
const showLogin = () => {
  showConfirmDialog({
    title: '提示',
    message: '您未登录账号，请先登录'
  }).then(() => {
    router.push({
      path: '/login',
      query: {
        dynamicKeepAlive: 0
      }
    })
  }).catch(() => {
    // on cancel
  })
}
// 发送评论
const send = async () => {
  if (!getToken()) {
    showLogin()
    return
  }
  if(!comment.value){
    showNotify({ type: 'danger', message: '请输入评论内容' })
    return false
  }
  // console.log("send")
  btnLoading.value = true
  let data = {
    "infoId": props.id,
    "toCommentId": props.cid?props.cid:undefined,
    "content": comment.value
  }

  await toComment(data).then(res => {
    console.log('提交评价', res)

    showNotify({ type: 'success', message: '评价提交成功' })
    emit('changeShowPicker', false)
    emit('updateMsg', res.data)
    comment.value = ''
  }).catch(err => {
    console.log(err)
    showNotify({ type: 'danger', message: '评价提交失败' })
  }).finally(() => {
    btnLoading.value = false
  })
}

</script>

<style lang="scss" scoped>
.sendComment {
  &_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.3333rem;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);

    :deep(.van-cell-group--inset) {
      margin: 0;
    }

    :deep(.van-cell) {
      background-color: #fff;
    }
  }
}
</style>